<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS003-用户订单信息案例</title>
</head>
<style>
  * {
    /* border: 2px solid red; */
  }

  h1 {
    text-align: center;
  }

  table,
  th,
  td {
    border: 2px solid black;
  }

  table {
    border-collapse: collapse;
    margin: 0 auto;
  }

  th,
  td {
    padding: 5px 10px;
    text-align: center;
  }
</style>

<body>

  <script>
    /**
     * 需求：
     * 用户输入商品价格、商品数量和收货地址，
     * 自动打印订单信息
     */
    // 前面加+隐式转换为数字
    let price = +prompt("请输入商品价格："); //1999
    let num = +prompt("请输入商品数量：");
    let address = prompt("请输入收货地址："); //武汉黑马
    let total = price * num;
    document.write(`
      <h1>订单信息</h1>
      <table>
        <tr>
          <th>商品名</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>收货地址</th>
        </tr>
        <tr>
          <td>小米手机青春PLUS</td>
          <td>${price}元</td>
          <td>${num}</td>
          <td>${total}元</td>
          <td>${address}</td>
        </tr>
      </table>
    `)


  </script>
</body>

</html>